import React from "react";

export default function Workload({ staffList }) {
  return (
    <div>
      <div
        style={{ marginTop: "24px", backgroundColor: "#fff", padding: "10px" }}
      >
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            marginBottom: "16px",
            paddingInline: "20px",
            marginTop: "10px",
          }}
        >
          <h2 style={{ fontSize: "18px" }}>工作量</h2>
          <a
            href="#"
            style={{
              color: "#1890ff",
              textDecoration: "none",
              fontSize: "14px",
            }}
          >
            查看全部 &gt;
          </a>
        </div>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(2, 1fr)",
            gap: "16px",
          }}
        >
          {staffList.map((staff, index) => (
            <div
              key={index}
              style={{
                backgroundColor: "#f4f9fd",
                padding: "16px",
                borderRadius: "15px",
                display: "flex",
                alignItems: "center",
                gap: "12px",
                boxShadow: "0 2px 8px rgba(0,0,0,0.05)",
                display: "flex",
                flexWrap: "wrap",
                justifyContent: "space-evenly",
              }}
            >
              <img
                src={staff.avatar}
                alt={staff.name}
                style={{
                  width: "40px",
                  height: "40px",
                  borderRadius: "50%",
                  objectFit: "cover",
                }}
              />
              <div>
                <div style={{ marginBottom: "4px", textAlign: "center" }}>
                  {staff.name}
                </div>
                <div
                  style={{
                    fontSize: "14px",
                    color: "#666",
                    marginBottom: "4px",
                    fontSize: "10px",
                  }}
                >
                  {staff.posts}
                </div>
                <span
                  style={{
                    fontSize: "12px",
                    padding: "2px 8px",
                    backgroundColor: "#f0f0f0",
                    borderRadius: "4px",
                    display: "block",
                    textAlign: "center",
                  }}
                >
                  {staff.grade}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
